@extends('layouts.app')

@section('content')
<style>
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js"></script>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>

                <div class="card-body">
                    @if (session('status'))
                    <div class="alert alert-success" role="alert">
                        {{ session('status') }}
                    </div>
                    @endif
                    <form action="/store/{{$game->id}}" method="post" enctype="application/x-www-form-urlencoded">
                        <div class="form-group">
                            <label for="">名称</label>
                            <input type="text" class="form-control" name="name" value="{{$game->name}}">
                        </div>
                        <div class="form-group">
                            <label for="">类型</label>
                            <select class="form-control" id="category_id" name="category_id" value="{{$game->category_id}}">
                                <option value="1">SLG</option>
                                <option value="2">RPG</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="">引擎版本</label>
                            <select class="form-control" id="engine_version" name="engine_version" value="{{$game->engine_version}}">
                                <option value="1">原版</option>
                                <option value="2">S2</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="">图标</label>
                            <img class="form-control" id="iconImg" src="{{$game->icon}}" alt="" style="width:65px; height:65px; padding:0px; margin-bottom:10px">
                            <input type="hidden" id="icon" name="icon" value="{{$game->icon}}">
                            <input class="file-input" type="file" id="iconUpload" />
                        </div>
                        <div class="form-group">
                            <label for="">简介</label>
                            <textarea class="form-control" id="" rows="3" name="summary">{{$game->summary}}</textarea>
                        </div>
                        <div class="form-group">
                            <label for="">详细介绍</label>
                            <textarea class="form-control" id="" rows="3" name="desc">{{$game->desc}}</textarea>
                        </div>
                        <div class="form-group">
                            <label for="">LIB</label>
                            <a id="libLink" download class="btn btn-outline-link btn-block" style="margin-bottom:10px" href="{{$game->lib}}">{{$game->lib}}</a>
                            <input type="hidden" class="form-control" id="lib" name="lib" value="{{$game->lib}}">

                            <input class="file-input" type="file" id="libUpload" />
                        </div>
                        <div class="form-group">
                            <label for="">标签</label>
                            <input type="text" class="form-control" name="tags" value="{{$game->tags}}">
                            <span class="badge badge-success">多标签使用英文逗号分隔</span>
                        </div>

                        <div class="form-group">
                            <label for="">开发者</label>
                            <input type="text" class="form-control" name="developer" value="{{$game->developer}}">
                        </div>

                        <div class="form-group">
                            <label for="">版本</label>
                            <input type="text" class="form-control" name="version" value="{{$game->version}}">
                        </div>

                        <button type="submit" class="btn btn-primary">保存</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="uploadProgress" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Loading</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="libProgress" class="progress" style="margin:10px 0px;">
                    <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    let token = '{{$token}}';


let config = {
    useCdnDomain: true,
    //region: qiniu.region.z2
};
let putExtra = {
    fname: "",
    params: {
    },
    mimeType: null
};

function bindUploder(id, cb){
    $('#'+ id).change(function(){

        let file = this.files[0];
        let key = 'airbox/' + new Date().getTime() + file.name;
        // 添加上传dom面板
        let next = (response) =>{
            let total = response.total;
            console.log('process', total)
            //$(".speed").text("进度：" + total.percent + "% ");
            $('#uploadProgress').modal('show');
            $('#libProgress').attr('aria-valuenow', total.percent)
            if(total.percent == 100){
                setTimeout(() => {
                    $('#uploadProgress').modal('hide');
                    $('#libProgress').attr('aria-valuenow', 0)
                }, 1500)
            }
        }

        let subscription;
        // 调用sdk上传接口获得相应的observable，控制上传和暂停
        let observable = qiniu.upload(file, key, token, putExtra, config);
        observable.subscribe(next, () => {}, (res) => {
            console.log(res)
            cb('http://cdn.qryoga.com/' + res.key)
        })
    })
}

$(function(){
    $('#category_id').val({{$game->category_id}});
    $('#engine_version').val({{$game->engine_version}});
    bindUploder('iconUpload', (url)=>{
        $("#icon").val(url);
        $("#iconImg").attr('src', url);
    })
    bindUploder('libUpload', (url)=>{
        $("#lib").val(url);
        $("#libLink").attr('href', url);
    })
});
</script>
@endsection
